<!DOCTYPE html>
<html lang="zh-cn">

<head>
  {include file="common/head"}
  <style>
    .swiper-container {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: scale(1);
      transition: all 0.6s;
      border-radius: 20px;
      overflow: hidden;
      position: relative;
    }

    .swiper-slide span {
      width: 100%;
      height: 2vh;
      line-height: 2vh;
      text-indent: 20px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      bottom: 0;
      text-align: left;
      font-size: 14px;
      display: none;
    }

    .swiper-slide img {
      opacity: 0.4;
      transition: all 0.6s;
    }

    .swiper-slide-active,
    .swiper-slide-duplicate-active {
      transform: scale(1);
      z-index: 9;
      transition: all 0.6s;
      border-radius: 20px;
      overflow: hidden;
    }

    .swiper-slide-active span {
      display: block;
    }

    .swiper-slide-active img {
      opacity: 1;
      transition: all 0.6s;
    }

    .swiper-container .swiper-pagination {
      bottom: -30px;
    }
  </style>




</head>

<body>
  {include file="common/menu"}
  <div class="baner-inner">
    <div class="img-banner wow" style="background-image: url(__static__/static/image/lxbanner.gif);"></div>
  </div>



  <div class="mdxx">

    <div class="bt3">门店形象</div>



    <div class="pc">
      <div class="swiper-container wow fadeInLeft ">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="__static__/static/picture/m1.jpg"><span>门头</span></div>
          <div class="swiper-slide"><img src="__static__/static/picture/m2.jpg"><span>室内</span></div>
          <div class="swiper-slide"><img src="__static__/static/picture/m3.jpg"><span>收银</span></div>

        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>

      <!-- Swiper JS -->
      <script src="__static__/static/js/swiper-bundle.min.js"></script>

      <!-- Initialize Swiper -->
      <script>
        var swiper = new Swiper('.swiper-container', {

          slideToClickedSlide: true,
          autoplay: {
            delay: 3000,//1秒切换一次
            disableOnInteraction: false,
          },
          speed: 2000,

          slidesPerView: 2,
          spaceBetween: 40,
          centeredSlides: true,
          loop: true,

          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        });
      </script>
    </div>

    <div class="ph">
      <div class="swiper-container100">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="__static__/static/picture/m1.jpg"><span>门头</span></div>
          <div class="swiper-slide"><img src="__static__/static/picture/m2.jpg"><span>室内</span></div>
          <div class="swiper-slide"><img src="__static__/static/picture/m3.jpg"><span>收银</span></div>

        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>

      <!-- Swiper JS -->
      <script src="__static__/static/js/swiper-bundle.min.js"></script>

      <!-- Initialize Swiper -->
      <script>
        var swiper = new Swiper('.swiper-container100', {

          slideToClickedSlide: true,
          autoplay: {
            delay: 3000,//1秒切换一次
            disableOnInteraction: false,
          },
          speed: 2000,

          slidesPerView: 1,
          spaceBetween: 20,
          centeredSlides: true,
          loop: true,

          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        });
      </script>
    </div>

  </div>
  {include file="common/footer"}

</body>

</html>